<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入班组名称" style="width: 200px" v-model="teamsName"></el-input>
      <el-date-picker
          v-model="attendanceMonth"
          type="month"
          placeholder="选择考勤月份"
          style="width: 180px;margin-left: 10px"
      ></el-date-picker>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
      <el-button type="primary" plain style="margin-left: 10px" @click="exportExcel">导出</el-button>
    </div>


    <div class="table">
      <el-table :data="tableData" stripe border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="80" align="center"></el-table-column>
        <el-table-column prop="teamsId" label="序号" width="200" align="center" sortable></el-table-column>
        <el-table-column prop="teamsName" label="班组名称" width="200" align="center"></el-table-column>
        <el-table-column prop="teamsNumber" label="班组人数" width="200"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="goToAttendanceDetail(scope.row)">班组考勤明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-button @click="prevPage" icon="el-icon-arrow-left" plain></el-button>
        <el-input v-model.number="currentPage" type="number" min="1" :max="totalPages" style="width: 80px"></el-input>
        <span>/ {{ totalPages }}</span>
        <el-button @click="nextPage" icon="el-icon-arrow-right" plain></el-button>
      </div>
    </div>

  </div>
</template>

<script>
//导出插件
import FileSaver from "file-saver";
import XLSX from "xlsx";
//导入插件
import { read, utils } from "xlsx";
export default {
  name: "User",
  data() {
    return {
      tableData: [
        // { teamName: "班组A", onlineCount: 12, yesterdayHours: 6, yesterdayWorkers: 60, monthHours: 240, monthWorkers: 120 },
        // { teamName: "班组B", onlineCount: 14, yesterdayHours: 8, yesterdayWorkers: 70, monthHours: 260, monthWorkers: 130 },
        // { teamName: "班组C", onlineCount: 16, yesterdayHours: 7, yesterdayWorkers: 65, monthHours: 280, monthWorkers: 140 },
        // { teamName: "班组D", onlineCount: 18, yesterdayHours: 9, yesterdayWorkers: 75, monthHours: 300, monthWorkers: 150 },
      ],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 6,  // 总条数
      totalPages: 1,  // 总页数
      teamsName: null,
      attendanceMonth: null,
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      selection: [] // 存储勾选的数据
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.pageNum;
      },
      set(val) {
        this.pageNum = val;
      }
    }
  },
  created() {
    this.$request.get('/teams', {
      params: {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
    }).then(res => {
      this.tableData = res.data.rows;
      this.total = res.data?.total
    });
    this.load(1);  // 加载第一页数据
    this.totalPages = Math.ceil(this.total / this.pageSize);
  },
  methods: {
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/teams', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          teamsName:this.teamsName,

        }
      }).then(res => {
        this.tableData = res.data?.rows
        this.total = res.data?.total
      })
    },
    prevPage() {
      if (this.pageNum > 1) {
        this.load(this.pageNum - 1);
      }
    },
    nextPage() {
      if (this.pageNum < this.totalPages) {
        this.load(this.pageNum + 1);
      }
    },
    goToAttendanceDetail(row) {
      // Implement logic to navigate to attendance detail page
      this.$router.push('/teamAttendance')
    },
    reset() {
      this.teamName = null;
      this.attendanceMonth = null;
      this.load(1);
    },
    getExcel(dom, title = '默认标题') {
      var excelTitle = title;
      // Filter selected rows for export
      const selectedRows = this.tableData.filter(row => this.selection.includes(row));
      var wb = XLSX.utils.table_to_book(document.querySelector(dom), { raw: true, sheet: "Sheet1", display: true, cellStyles: true });
      var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            excelTitle + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    exportExcel() {
      this.getExcel('.table', '班组考勤表');
    }
  }
};
</script>

<style scoped>
.search {
  margin-bottom: 20px;
}
.pagination {
  margin-bottom: 20px;
  text-align: center;
}
</style>
